<template>
  <el-form
    v-loading="loading"
    class="demo-form-inline"
    :inline="true"
    ref="form1"
    :model="formInline"
    label-width="100px"
    :rules="rules"
  >
    <el-row :gutter="20" style="width:1000px;">
      <el-col :span="8">
        <el-form-item label="标题:" prop="tittle">
          <el-input v-model="formInline.tittle" style="width:202px;" placeholder="请输入标题"/>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="轮播顺序:" prop="sort">
          <el-input v-model="formInline.sort" style="width:202px;" placeholder="请输入轮播顺序"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1000px;">
      <el-col :span="8">
        <el-form-item label="应用范围:" prop="applicationRange">
          <el-select
            v-model="formInline.applicationRange"
            style="width:202px;"
            v-if="resultDics.APPLICATION_RANGE"
            @change="changeAppliedRange"
            placeholder="应用范围"
          >
            <el-option
              v-for="item in resultDics.APPLICATION_RANGE.children"
              :key="item.dicCode"
              :label="item.dicName"
              :value="item.dicCode"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="投放位置:" prop="layoutPosition">
          <el-select v-model="formInline.layoutPosition" style="width:202px;" placeholder="投放位置">
            <el-option
              v-for="item in options.put_Position.children"
              :key="item.dicCode"
              :label="item.dicName"
              :value="item.dicCode"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1000px;">
      <el-col :span="8">
        <el-form-item label="广告类型:">
          <el-select
            style="width:202px;"
            v-model="formInline.advertisingType"
            @change="changeAdvertisingType"
            placeholder="广告类型"
          >
            <el-option
              v-for="item in advertisingTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          :label="formInline.advertisingType === 0 ? '商机：' : formInline.advertisingType === 1 ? '直播：' :'课程：'"
        >
          <el-select
            v-model="formInline.dataId"
            style="width:202px;"
            :placeholder="formInline.advertisingType === 0 ?'商机' : formInline.advertisingType === 1 ? '直播' :'课程' "
          >
            <el-option
              v-for="item in options.commodity"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1000px; marginLeft:0">
      <el-form-item label="投放时间:">
        <el-date-picker
          v-model="formInline.CEtimer"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @blur="blurDataPick"
        />
      </el-form-item>
    </el-row>
    <el-row :gutter="20" style="width:1000px; marginLeft:0+">
      <el-form-item label="广告图片：">
        <uploadImg
          remark="广告图片"
          :list="photoList"
          typeCode="IMAGE_ADVERTISING_FILE"
          @changeadvert="changeadvert"
        />
      </el-form-item>
    </el-row>
    <el-row :gutter="20" style="width:1000px;">
      <el-form-item label="标签：">
        <NewTags
          v-if="tagsArr.length"
          :data="tagsArr"
          :initData="initDataArr"
          @changeTag="changeLabel"
        />
      </el-form-item>
    </el-row>
    <el-row :gutter="20" style="width:1000px;">
      <el-col :span="8">
        <el-form-item label="是否上架:">
          <el-checkbox v-model="formInline.status">上架</el-checkbox>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1000px;">
      <el-col :span="16">
        <el-form-item label="备注">
          <el-input
            v-model="formInline.remark"
            style="width:534px;"
            resize="none"
            type="textarea"
            show-word-limit
            rows="3"
            maxlength="1000"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1000px;">
      <el-col :span="16" style="textAlign:center;marginTop:30px;">
        <el-button type="primary" @click="submitCourseInfo">提 交</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import NewTags from '../commom/newTags';
import uploadImg from '../commom/uploadImg';
import mmUrl from '~/utils/utilUrl';
import { createDics } from '~/utils/util';
import regular from '~/utils/regular';
export default {
  components: {
    NewTags,
    uploadImg
  },
  props: ["id"],
  data() {
    return {
      tagsArr: [],
      initDataArr: [],
      loading: true,
      isEditor: this.$props.id !== "create",
      rules: {
        dataId: regular.requireChange,
        advertisingType: regular.requireChange,
        layoutPosition: regular.requireChange,
        applicationRange: regular.requireChange,
        sort: regular.sort,
        tittle: regular.require50
      },
      formInline: {
        advertisingType: null,
        applicationRange: null,
        automaticId: 0,
        dataId: null,
        endTime: null,
        label: null,
        layoutPosition: null,
        remark: null,
        sort: null,
        startTime: null,
        status: false,
        tittle: null,
        CEtimer: []
      },
      editor: this.$props.id === "create",
      CommitJavaArr: [],
      resultDics: {},
      photoList: [],
      copyPhotoList: [],
      lives: [],
      dics: [],
      uploadImg: false,
      options: {
        advertising_type: [],
        put_Position: {
          dicName: '请选择上一级',
          children: []
        },
        appliedRange: [],
        commodity: [
          {
            id: '',
            name: ''
          }
        ]
      },
      advertisingTypeArr: [
        {
          value: 0,
          label: '商机'
        },
        {
          value: 1,
          label: '直播'
        },
        {
          value: 2,
          label: '课程'
        }
      ]
    }
  },
  watch: {
    "formInline.applicationRange"(newName) {
      if (newName === "Advertising_APP") {
        this.options.put_Position = this.resultDics.LAYOUT_POSITION_APP;
      } else if (newName === "Advertising_WEB") {
        this.options.put_Position = this.resultDics.LAYOUT_POSITION_WEB;
      }
    }
  },
  mounted() {
    this.getInitLabel();
    this.getInitFormData();
  },
  methods: {
    getInitFormData() {
      const id = this.editor ? '' : this.$props.id
      this.$post({
        url: this.editor
          ? mmUrl.advertising.loadcreate
          : mmUrl.advertising.loadedit,
        data: {
          id
        }
      }).then(res => {
        this.loading = false
        this.resultDics = createDics(res.dics, 'dicCode')
        this.projectDTOs = res.projectDTOs
        this.courseDTOS = res.courseDTOS
        this.lives = res.lives
        if (!this.editor) {
          this.formInline = res.item
          this.initDataArr = res.item.label ? JSON.parse(res.item.label) : []
          this.formInline.advertisingType = Number(
            this.formInline.advertisingType
          )
          res.item.startTime
            ? this.$set(this.formInline, 'CEtimer', [
              res.item.startTime,
              res.item.endTime
            ])
            : '';
          res.item.advertisingType == 2
            ? (this.options.commodity = res.courseDTOS)
            : res.item.advertisingType == 0
              ? (this.options.commodity = res.projectDTOs.map(v => {
                return {
                  name: v.projectName,
                  id: v.id
                }
              }))
              : (this.options.commodity = res.lives.map(v => {
                return {
                  name: v.tittle,
                  id: v.id
                }
              }))
          let result = res.item.applicationRange
          this.getFilePhtot(
            result === 'Advertising_WEB'
              ? 'IMAGE_ADVERTISING_FILE_WEB_CAROUSEL'
              : 'IMAGE_ADVERTISING_FILE_APP_CAROUSEL'
          )
        }
      })
    },
    changeAdvertisingType() {
      this.formInline.dataId = '';
      if (this.formInline.advertisingType === 2) {
        this.options.commodity = this.courseDTOS
      } else if (this.formInline.advertisingType === 0) {
        this.options.commodity = this.projectDTOs.map(v => {
          return {
            name: v.projectName,
            id: v.id
          }
        })
      } else if (this.formInline.advertisingType === 1) {
        this.options.commodity = this.lives.map(v => {
          return {
            name: v.tittle,
            id: v.id
          }
        })
      }
    },
    getFilePhtot(res) {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: res
        }
      }).then(res => {
        this.copyPhotoList = res
        this.photoList = res
      })
    },
    getInitLabel() {
      this.$post({
        url: mmUrl.label.pageLoad,
        data: {
          keyword: '',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 10,
            skipCount: 0
          },
          type: 0
        }
      }).then(res => {
        this.tagsArr = res.items.items
      })
    },
    blurDataPick() {
      this.formInline.endTime = this.formInline.CEtimer[1]
      this.formInline.startTime = this.formInline.CEtimer[0]
    },
    changeadvert(res) {
      this.uploadImg = true
      this.CommitJavaArr = res
    },
    changeLabel(res) {
      this.formInline.label = JSON.stringify(res)
    },
    changeAppliedRange(e) {
      this.formInline.applicationRange = e
      this.formInline.layoutPosition = '';
    },
    changeAdvertising(e) {
      this.formInline.advertisingType = e
      this.formInline.dataId = '';
    },
    submitCourseInfo() {
      this.$refs['form1'].validate(valid => {
        if (valid) {
          const that = this
          this.dialogTableVisible = false
          this.$post({
            url: this.isEditor
              ? mmUrl.advertising.editadvertising
              : mmUrl.advertising.createadvertising,
            data: {
              item: Object.assign({ id: this.advertisingId }, this.formInline)
            }
          })
            .then(res => {
              that.CommitJavaArr.dataId = res.item.id
              this.CommitJavaArr.typeCode =
                this.formInline.applicationRange === 'Advertising_APP'
                  ? 'IMAGE_ADVERTISING_FILE_APP_CAROUSEL'
                  : 'IMAGE_ADVERTISING_FILE_WEB_CAROUSEL';
              const newArr = [that.CommitJavaArr]
              if (!this.uploadImg) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.$emit('closeDialog')
                return false
              }
              this.copyPhotoList.length > 0 ? (newArr[0].ident = 2) : '';
              this.$post({
                url: mmUrl.file.uploadFile,
                data: {
                  items: newArr
                }
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.$emit('closeDialog')
              })
            })
            .catch(() => {})
        }
      })
    }
  }
}
</script>

<style>
</style>
